/*
  学习目标：生命周期-更新阶段
  💥触发更新阶段的两种方式：
    1. setState调用修改数据
    2. props传值改变

  步骤：
     1. render: 渲染
     2. componentDidUpdate :  更新后
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 99,
  };

  // 代表： 更新后
  // 类似： updated
  // 场景： 做缓存，
  componentDidUpdate() {
    // ! `render`与`componentsDidUpdate` 中都不能调用`setState` ，会造成死循环。
    // ! ❌this.setState({ count: count + 1 });
  }

  // 更新阶段， 表示更新界面
  render() {
    const { count } = this.state;
    // ! `render`与`componentsDidUpdate` 中都不能调用`setState` ，会造成死循环。
    // ! ❌this.setState({ count: count + 1 });
    return (
      <div>
        <button onClick={() => this.setState({ count: count + 1 })}>
          点我+1
        </button>
        <Child count={count} />
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return <div>我是子组件 - {this.props.count}</div>;
  }
}
